<template>
	<div class="back_contain_n mine-account">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index"
				:class="{'active': viewType == item.key}"
				@click="changeView(item)"
			>
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<div class="mainTable">
			<!-- 头部搜索 -->
			<div class="Search_Top_Part">
				<div class="search_list">
					<div class="sb_">
						<div class="input_flex">
							<span class="search_left">设备总数：</span><span>{{OnDutyProductBan.deviceCount}}</span>
						</div>
						<div class="input_flex">
							<span class="search_left">生产：</span><span style="color: #2196f3;">{{OnDutyProductBan.deviceProdCount}}</span>
						</div>
						<div class="input_flex">
							<span class="search_left">待机：</span><span style="color: #ff9800;">{{OnDutyProductBan.deviceWaitCount}}</span>
						</div>
						<div class="input_flex">
							<span class="search_left">空置：</span><span style="color: #918d8d;">{{OnDutyProductBan.deviceFreeCount}}</span>
						</div>
					</div>
					<div style="margin-left: 20px;">
						<div class="input_flex daterange">
							<el-input clearable disabled v-model="OnDutyProductBan.dutyDay" placeholder="生产日期"></el-input>
						</div>
						<div class="input_flex">
							<el-input clearable disabled v-model="OnDutyProductBan.whiteDay =='1'?'白班':'夜班'" placeholder="班次"></el-input>
						</div>
						<div class="input_flex">
							<el-input clearable disabled v-model="OnDutyProductBan.banZhang" placeholder="班长"></el-input>
						</div>
					</div>
				</div>
			</div>
			<!-- table -->
			<sys-table
				:tableData="OnDutyProductBan.onDutyProducts"
				:tableLoading="tableLoading"
				:tableHeader="tableHeader"
				:isOperate="false" :isPagination="false"
			>
			</sys-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				viewType: '单支连排',
				paramList: [
					{name: "单支连排", key: '单支连排'},
					{name: "多支", key: '多支'},
					{name: "伸缩", key: '伸缩'},
					{name: "U型", key: 'U型'},
				],

				tableLoading: true, //table刷新
				tableHeader: [],

				productMaps:{},
				OnDutyProductBan:{
					deviceCount:0,
					deviceProdCount:0,
					deviceWaitCount:0,
					deviceFreeCount:0,
					dutyDay:'',
					whiteDay:'',
					banZhang:'',
					onDutyProducts:[],
				}

			};
		},
		methods: {
			changeView(val) {
				let self = this;
				self.viewType = val.key;
				self.tableLoading = true;
				setTimeout(() => {
					self.tableHeader = [
						{"columnValue": "deviceCode", "columnName": "包装机号"},
						{"columnValue": "planCode", "columnName": "计划号"},
						{"columnValue": "planTypeCn", "columnName": "计划类型"},
						{"columnValue": "planName", "columnName": "计划名称"},
						{"columnValue": "gradeValue", "columnName": "规格", width: 150},
						{"columnValue": "thNumber", "columnName": "单件万支"},
						{"columnValue": "peieceNum", "columnName": "计划（万支）"},
						{"columnValue": "productPieceNum", "columnName": "已完成(万支)"},
						{"columnValue": "productStatusCn", "columnName": "机台状态"},
						{"columnValue": "operateUserName", "columnName": "操作工"},
					]
					self.OnDutyProductBan = self.productMaps[self.viewType];
					self.tableLoading = false;
				}, 500)
			},

			getOnDutyProductBanList() {
				let self = this;
				self.productMaps = {};
				self.tableLoading = true;
				self.$http({
					url: "/jinl/dutyprod/getOnDutyProductBanList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.productMaps = resp.result;
						console.log('=====self.productMaps=======')
						console.log(self.productMaps)
						self.OnDutyProductBan = self.productMaps[self.viewType];
						console.log(self.OnDutyProductBan)
						self.tableHeader = [
							{"columnValue": "deviceCode", "columnName": "包装机号"},
							{"columnValue": "planCode", "columnName": "计划号"},
							{"columnValue": "planTypeCn", "columnName": "计划类型"},
							{"columnValue": "planName", "columnName": "计划名称"},
							{"columnValue": "gradeValue", "columnName": "规格", width: 150},
							{"columnValue": "thNumber", "columnName": "单件万支"},
							{"columnValue": "peieceNum", "columnName": "计划（万支）"},
							{"columnValue": "productPieceNum", "columnName": "已完成(万支)"},
							{"columnValue": "productStatusCn", "columnName": "机台状态"},
							{"columnValue": "operateUserName", "columnName": "操作工"},
						];
						self.tableLoading = false;

					}
				});
			},

		},
		mounted() {
			let self = this;
			self.getOnDutyProductBanList();
		},
		components: {}
	};
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.mine-account {
		.search_list {
			display: flex;
			justify-content: space-between;

			.sb_ {
				margin-right: 20px;

				.input_flex {
					width: auto;
					display: flex;
					align-items: center;
				}
			}
		}

		.leftList {
			display: flex;
			margin-bottom: 15px;

			li {
				list-style: none;
				width: 100px;
				height: 30px;
				line-height: 28px;
				border-bottom: 1px solid #fff;
				color: #333;
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .5s;
				position: relative;
				display: flex;
				justify-content: center;

				&.active {
					color: #ff9935;
					border-color: #ff9935;
					position: relative;
					font-weight: 600;
					font-size: 14px;
				}

				.nums {
					position: absolute;
					right: 5px;
					top: 0;
					background: #f44336;
					color: #fff;
					height: 16px;
					line-height: 16px;
					font-weight: 400;
					border-radius: 8px;
					font-size: 12px;
					padding: 0 5px;
				}
			}
		}
	}
</style>
